﻿<html>
<head><meta http-equiv="content-type" content="txt/html;charset=utf-8" />
<title>javascript解码读取二维码信息</title>
<script type="text/javascript" src="grid.js"></script>
<script type="text/javascript" src="version.js"></script>
<script type="text/javascript" src="detector.js"></script>
<script type="text/javascript" src="formatinf.js"></script>
<script type="text/javascript" src="errorlevel.js"></script>
<script type="text/javascript" src="bitmat.js"></script>
<script type="text/javascript" src="datablock.js"></script>
<script type="text/javascript" src="bmparser.js"></script>
<script type="text/javascript" src="datamask.js"></script>
<script type="text/javascript" src="rsdecoder.js"></script>
<script type="text/javascript" src="gf256poly.js"></script>
<script type="text/javascript" src="gf256.js"></script>
<script type="text/javascript" src="decoder.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript" src="findpat.js"></script>
<script type="text/javascript" src="alignpat.js"></script>
<script type="text/javascript" src="databr.js"></script>

<script type="text/javascript">
    var gCtx = null;
	var gCanvas = null;

	var imageData = null;
	var ii=0;
	var jj=0;
	var c=0;


	function dragenter(e) {	    e.stopPropagation();	    e.preventDefault();	}
	function dragover(e) {	    e.stopPropagation();	    e.preventDefault();	}
	function drop(e) {	    e.stopPropagation();	    e.preventDefault();	    var dt = e.dataTransfer;	    var files = dt.files;	    handleFiles(files);	}
	function handleFiles(f) {
	    var o = [];
	    for (var i = 0; i < f.length; i++) {
	        var reader = new FileReader();
	        reader.onload = (function (theFile) {
	            return function (e) {
	                qrcode.decode(e.target.result);
	            };
	        })(f[i]);
	        // Read in the image file as a data URL.
	        reader.readAsDataURL(f[i]);
	    }
	}
	function load() {
	    initCanvas(640, 480);
	    qrcode.success = function (d) { alert('javascript读出的二维码信息为：' + utf8ToUtf16(d)) };
	    qrcode.error = function (d) { alert('读取二维码信息错误：' + utf8ToUtf16(d)) };
	    qrcode.callback = function (d, status) { alert('读取二维码信息' + (status == 1 ? '成功' : '失败') + '：' + utf8ToUtf16(d)); };
	    qrcode.decode("meqrthumb.png");
	}

	function initCanvas(ww, hh) {
	    gCanvas = document.getElementById("qr-canvas");
	    gCanvas.addEventListener("dragenter", dragenter, false);
	    gCanvas.addEventListener("dragover", dragover, false);
	    gCanvas.addEventListener("drop", drop, false);
	    var w = ww;
	    var h = hh;
	    gCanvas.style.width = w + "px";
	    gCanvas.style.height = h + "px";
	    gCanvas.width = w;
	    gCanvas.height = h;
	    gCtx = gCanvas.getContext("2d");
	    gCtx.clearRect(0, 0, w, h);
	    imageData = gCtx.getImageData(0, 0, 320, 240);
	}

	function utf8ToUtf16(s) {//将utf-8字符串转码为unicode字符串，要不读取的二维码信息包含中文会乱码
	    if (!s) {
	        return;
	    }

	    var i, codes, bytes, ret = [], len = s.length;
	    for (i = 0; i < len; i++) {
	        codes = [];
	        codes.push(s.charCodeAt(i));
	        if (((codes[0] >> 7) & 0xff) == 0x0) {
	            //单字节  0xxxxxxx  
	            ret.push(s.charAt(i));
	        } else if (((codes[0] >> 5) & 0xff) == 0x6) {
	            //双字节  110xxxxx 10xxxxxx  
	            codes.push(s.charCodeAt(++i));
	            bytes = [];
	            bytes.push(codes[0] & 0x1f);
	            bytes.push(codes[1] & 0x3f);
	            ret.push(String.fromCharCode((bytes[0] << 6) | bytes[1]));
	        } else if (((codes[0] >> 4) & 0xff) == 0xe) {
	            //三字节  1110xxxx 10xxxxxx 10xxxxxx  
	            codes.push(s.charCodeAt(++i));
	            codes.push(s.charCodeAt(++i));
	            bytes = [];
	            bytes.push((codes[0] << 4) | ((codes[1] >> 2) & 0xf));
	            bytes.push(((codes[1] & 0x3) << 6) | (codes[2] & 0x3f));
	            ret.push(String.fromCharCode((bytes[0] << 8) | bytes[1]));
	        }
	    }
	    return ret.join('');
	}  
</script>
</head>
<body onload="load()">
将二维码图片拖放到下面的黑色框框内解码获取信息<br />  
<canvas id="qr-canvas" width="640" height="480" style="border:solid 1px #000"></canvas>
</body>
</html>